<script setup lang="ts">
import { OIcon, OIconClose } from '@opensig/opendesign';
import { useCommonStore } from '@/stores/common';
import { storeToRefs } from 'pinia';
import IconMenu from '~icons/app/icon-menu.svg'

const commonStore = useCommonStore();
const { showMobileNav } = storeToRefs(commonStore);

</script>

<template>
  <div class="header-mobile-nav">
    <OIcon class="nav-icon" @click="commonStore.toggleMobileNav">
      <IconMenu v-if="!showMobileNav"></IconMenu>
      <OIconClose v-if="showMobileNav"></OIconClose>
    </OIcon>
  </div>
</template>

<style scoped lang="scss">
.header-mobile-nav {
  display: flex;
  align-items: center;
  position: relative;

  &::before {
    top: var(--layout-header-height);
    right: 0;
    box-shadow: 0 3px 8px rgba(var(--o-mixedgray-14), 0.05);
    content: '';
    left: 0;
    pointer-events: none;
    position: fixed;
  }

  .nav-icon {
    color: var(--o-color-info2);
    font-size: 24px;
    cursor: pointer;
  }

  :deep(.o-icon) {
    path {
      fill: currentColor;
    }
  }
}
</style>